<template>
  <view class="calendar_containter">
    <bazi-section title="大运财富参考">
      <view class="containter" v-if="isVip != 1">
        <view class="dayun-box">
          <template v-for="(item, index) in dayun">
            <view class="dayun-item" :key="index" @click="dayunClick(item, index)">
              <view class="dayun-year"
                >{{ item.startAge }}-{{ item.endAge ? item.endAge + "岁" : "" }}</view
              >
              <view
                class="dayun-info"
                :class="[dayunIndex == index ? 'dayun-select' : '']"
              >
                <view class="dayun-ele">
                  <view class="dayun-ganzhi" :style="fiveElementInfo(item.ganZhi[0])">{{
                    item.ganZhi[0]
                  }}</view>
                  <view class="dayun-shishen">{{
                    shishenEllipsis(item.shiShen[0])
                  }}</view>
                </view>
                <view class="dayun-ele">
                  <view class="dayun-ganzhi" :style="fiveElementInfo(item.ganZhi[1])">{{
                    item.ganZhi[1]
                  }}</view>
                  <view class="dayun-shishen">{{
                    shishenEllipsis(item.shiShen[1])
                  }}</view>
                </view>
                <view class="caiku-tips" v-if="item.startAge">
                  <caiku-icon :showCai="item.wealthStrong"></caiku-icon>
                </view>
              </view>
            </view>
          </template>
        </view>
        <view class="info">
          <view class="score-box">
            <view class="title">以下十年为财旺，把握机会</view>
            <view class="score">
              <view
                class="score-item"
                v-for="(item, index) in caiwangList"
                :key="index"
                >{{ item }}</view
              >
            </view>
          </view>
        </view>
      </view>
      <view v-else>
        <no-vip></no-vip>
      </view>
    </bazi-section>
  </view>
</template>
<script>
import { mapGetters } from "vuex";
import baziSection from "./section.vue";
import wuxingColor from "@/utils/wuxing.js";
import caikuIcon from "./caiku-icon.vue";
import { shishenEllipsis } from "@/utils/index.js";
import { EventBus } from "@/main.js";
export default {
  components: {
    baziSection,
    caikuIcon,
  },
  props: {
    result: {
      type: Object,
      default: {},
    },
  },
  computed: {
    ...mapGetters({
      isVip: "user/isVip",
    }),
  },
  data() {
    return {
      baziResult: this.result,
      dayun: [],
      dayunIndex: 0,
      caiwangList: [],
      shishenEllipsis: shishenEllipsis,
    };
  },
  mounted() {
    this.$nextTick(() => {
      // 补全行个数
      let dayunTem = JSON.parse(JSON.stringify(this.baziResult.daYun));
      dayunTem.shift();
      // 获取财运旺年
      this.caiwangList = [];
      for (let item of dayunTem) {
        if (item.wealthStrong == true) {
          this.caiwangList.push(`${item.startAge}-${item.endAge}岁`);
        }
      }
      let length = dayunTem.length;
      let remainder = 5 - (length % 5);
      for (let i = 0; i < remainder; i++) {
        dayunTem.push({
          startAge: "",
          endAge: "",
          ganZhi: ["", ""],
          shiShen: ["", ""],
        });
      }
      this.dayun = dayunTem;
      EventBus.$emit("dayuncaifu", {
        dayunData: dayunTem[0],
      });
    });
  },
  methods: {
    // 对应五行信息
    fiveElementInfo(str) {
      let { color } = wuxingColor.getGanzhiWuxingColorInfo(str);
      return `color: ${color}`;
    },
    dayunClick(data, index) {
      if (this.dayunIndex == index) return;
      this.dayunIndex = index;
      EventBus.$emit("dayuncaifu", {
        dayunData: data,
      });
    },
  },
};
</script>

<style lang="scss" scoped>
.calendar_containter {
  width: 100%;
  box-sizing: border-box;
}

.dayun-box {
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  box-sizing: border-box;
  padding: 28rpx;

  .dayun-item {
    display: flex;
    flex-direction: column;
    align-items: center;
    flex-shrink: 0;
    width: 20%;
    box-sizing: border-box;

    .dayun-year {
      width: 100%;
      font-size: 20rpx;
      color: #787878;
      background-color: #f0f0f0;
      text-align: center;
    }

    .dayun-info {
      display: flex;
      flex-direction: column;
      align-items: center;
      padding: 6rpx;
      margin: 8rpx;
      box-sizing: border-box;
      position: relative;

      .dayun-ele {
        display: flex;
        flex-direction: row;
        line-height: 44rpx;

        .dayun-ganzhi {
          font-size: 40rpx;
          padding-right: 4rpx;
        }

        .dayun-shishen {
          font-size: 20rpx;
          color: #4b240d;
        }
      }
    }
  }
}
.dayun-select {
  border-radius: 12rpx;
  border: 2rpx solid #4b240d;
}
.caiku-tips {
  position: absolute;
  right: -34rpx;
  height: 100%;
  display: flex;
  flex-direction: column;
  justify-content: center;
}
.info {
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  align-items: center;
  padding: 20rpx 52rpx;
  background: rgba(216, 216, 216, 0.1);
  margin-bottom: 24rpx;

  .score-box {
    display: flex;
    flex-direction: column;
    align-items: flex-start;

    .title {
      color: #2c2c2c;
      width: fit-content;
      white-space: nowrap;
      font-size: 28rpx;
      font-weight: bold;
      margin-bottom: 10rpx;
    }

    .score {
      font-size: 24rpx;
      display: flex;
      flex-direction: row;
      flex-wrap: wrap;
      .score-item {
        border-radius: 4px;
        background: #e2dbd4;
        padding: 0 10rpx;
        margin-right: 14rpx;
      }
    }
  }
}
</style>
